<script setup lang="ts">
import { ref } from 'vue'
import type { UploadProps } from 'element-plus'

interface UserInfo {
  uid: string
  role: string
  nickname: string
  bio: string
  avatar: string
  email: string
  phone: string
  referrer: {
    uid: string
    nickname: string
  }
}

const userInfo = ref<UserInfo>({
  uid: 'UID123456',
  role: '普通用户',
  nickname: '张三',
  bio: '这是一段个人简介...',
  avatar: '',
  email: 'zhangsan@example.com',
  phone: '13800138000',
  referrer: {
    uid: 'UID100001',
    nickname: '李四'
  }
})

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  _response,
  uploadFile
) => {
  userInfo.value.avatar = URL.createObjectURL(uploadFile.raw!)
}
</script>

<template>
  <div class="user-info-container">
    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <h2>个人信息</h2>
        </div>
      </template>

      <div class="info-content">
        <div class="avatar-section">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="userInfo.avatar"
              :src="userInfo.avatar"
              class="avatar"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
          <p class="upload-tip">点击更换头像</p>
        </div>

        <div class="info-section">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="UID">
              {{ userInfo.uid }}
            </el-descriptions-item>
            <el-descriptions-item label="角色">
              {{ userInfo.role }}
            </el-descriptions-item>
            <el-descriptions-item label="昵称">
              <el-input v-model="userInfo.nickname" />
            </el-descriptions-item>
            <el-descriptions-item label="简介">
              <el-input
                v-model="userInfo.bio"
                type="textarea"
                :rows="3"
              />
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
              <el-input v-model="userInfo.email" />
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
              <el-input v-model="userInfo.phone" />
            </el-descriptions-item>
            <el-descriptions-item label="推荐人">
              {{ userInfo.referrer.nickname }} ({{ userInfo.referrer.uid }})
            </el-descriptions-item>
          </el-descriptions>

          <div class="action-buttons">
            <el-button type="primary">保存修改</el-button>
            <el-button>修改密码</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.user-info-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}

.info-card {
  background-color: #fff;
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #303133;
}

.info-content {
  display: flex;
  gap: 40px;
  padding: 20px 0;
}

.avatar-section {
  flex-shrink: 0;
  text-align: center;
}

.avatar-uploader {
  width: 150px;
  height: 150px;
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-tip {
  margin-top: 8px;
  color: #909399;
  font-size: 14px;
}

.info-section {
  flex-grow: 1;
}

.action-buttons {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

:deep(.el-descriptions) {
  padding: 0;
}

:deep(.el-descriptions__cell) {
  padding: 16px;
}
</style>
